<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <%--    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">--%>
    <link rel="icon" href="../../favicon.ico" type="image/x-icon"/>
    <title>关于借阅</title>
    <script crossorigin="anonymous" integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ==" src="//lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/wt.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">达理书城</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/home">控制台</a></li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/toInsertBook">商品管理</a></li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/user">用户</a></li>
            <li class="layui-nav-item">
                <a href="${pageContext.request.contextPath}/grzy">网页导航</a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="../../image/tx.jpg" class="layui-nav-img">
                    ${name}
                </a>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/userout">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="${pageContext.request.contextPath}/selectAllBook">所有图书</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/wxl">文学类</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/dml">动漫类</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/kjl">科技类</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="${pageContext.request.contextPath}/Borrow">关于借阅</a>
                </li>
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/journal">本站日志</a></li>
                <li class="layui-nav-item"><a href="">设置</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>有关借阅详情联系QQ:501664112</legend>
        </fieldset>
        <div id="main" style="width:800px;height:750px;float:left;"></div>
        <div style="top:300px;left:800px;"><img width="800" height="660" src="../../image/dsm.jpg">
            <br>
            <span><p style="font-size: xxx-large;" ><font face="楷体">   爱你们哟<i style="font-size: xxx-large" class="layui-icon">&#xe68c;</i>mua <i style="font-size: xxx-large" class="layui-icon">&#xe68c;</i></font></p></span>
        </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        &copy 2020-2021 吴劲松|<a href="../../关于我.html" >关于我</a> 501664112@qq.com | 当前在线人数: ${OnlineCount} |
    </div>
</div>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '当前各类书籍所剩数量-'
        },
        tooltip: {},
        legend: {
            data:['数量']
        },
        xAxis: {
            data: ["所有图书","文学类","动漫类","科技类"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [${AllCount}, ${wxlCount},${dmlcount},${kjlcount}]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>